<template>
  <div class="menu">
    <dl 
      class="category"
      @mouseleave="mouseleaveHandler"
    >
      <dt>全部分类</dt>
      <dd 
        v-for="(item, index) of $store.state.home.menu" 
        :key="index"
        @mouseenter="mouseenterHandler"
      >
        <i :class="item.type" />{{ item.name }}<span class="arrow" />
      </dd>
    </dl>
    <div 
      v-if="kind && curdetail"
      class="detail"
      @mouseenter="detailEnter"
      @mouseleave="mouseleaveHandler"
    >
      <template
        v-for="(item, index) in curdetail"
      >
        <h4 :key="index">{{ item.title }}</h4>
        <span 
          v-for="v of item.child" 
          :key="v"
        >{{ v }}</span>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timer: '',
        kind: ''
      }
    },
    computed: {
      curdetail() {
        return this.$store.state.home.menu.filter(item => item.type === this.kind)[0].child
      }
    },
    methods: {
      mouseenterHandler(e) {
        this.kind = e.target.querySelector('i').className
      },
      mouseleaveHandler() {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kind = ''
        }, 150)
      },
      detailEnter() {
        clearTimeout(this.timer)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .menu
    position relative 
    width 230px
    height 475px
    box-sizing border-box
    margin-top -50px
    background linear-gradient(-90deg, rgba(2, 181, 157, .85) 2%, rgba(22, 146, 183, .85) 100%)
    color #ffffff
    .category
      dt
        height 50px
        margin-left 15px
        padding-top 15px
        box-sizing border-box
        font-size 16px
        font-weight 400
      dd
        position relative 
        box-sizing border-box
        padding 2px 12px
        height 26px
        line-height 26px
        font-size 13px
        cursor pointer
        &:hover
          background rgba(255, 255, 255, .2)
          i
            opacity 1
        & > i 
          margin-right 11px
          font-family 'meituan' 
          font-style normal 
          opacity .3
          &::before
            display inline-block
            width 14px
            height 14px

        .food
          &::before
            content '\e622'
        .takeout 
            &::before 
              content "\e630" 

        .hotel 
          &::before 
            content "\e62a" 

        .homestay 
          &::before 
            content "\e631" 

        .movie 
          &::before 
            content "\e62c" 
            position relative 
            left -2px 

        .airport 
          &::before 
            content "\e632" 

        .ktv 
          &::before 
            content "\e627" 

        .life 
          &::before 
            content "\e633" 

        .hair 
          &::before 
            content "\e626" 
            transform scale(0.7) 

        .marry 
          &::before 
            content "\e629" 

        .offspring 
          &::before 
            content "\e623" 

        .sport 
          &::before 
            content "\e62b" 

        .furniture 
          &::before 
            content "\e625" 

        .study 
          &::before 
            content "\e624" 

        .health 
          &::before 
            content "\e628" 

        .bar 
          &::before 
            content "\e621" 

        .arrow 
          width 4px 
          height 4px 
          border-bottom 1px solid #fff 
          border-right 1px solid #fff 
          transform rotate(-45deg) 
          display block 
          position absolute 
          right 13px 
          top 0 
          bottom 0 
          margin auto 
    .detail
      position absolute 
      left 230px
      bottom 0
      width 400px
      height 416px
      background #ffffff
      padding 0 30px
      z-index 9999
      h4
        margin-top 24px
        height 22px
        line-height 22px
        padding-bottom 10px
        border-bottom 1px solid #e5e5e5
      span
        display inline-block
        line-height 15px
        margin-right 16px
        margin-top 10px
        color #999
        font-size 12px
        cursor pointer
        &:hover
          color #31bbac

    .slide
      height 240px
      margin 10px
      img
        height 240px
</style>
